//登录

<template>
  <div id="login">
    <!--<img class="t1" src="./../assets/10.png"/>-->
    <div class="s-dl" >
      <div class="s-z">
        <div class="s-z1">
          <img class="s-t2" src=""/>
          <h1>XXX后台管理系统</h1>
          <div class="s-y-1">
            <span class="s-sp1 iconfont icon-yonghuming"></span>
            <input class="s-int1" type="text" v-model="user"/>
          </div>
          <div class="s-y-2">
            <span class="s-sp2 iconfont icon-mima"></span>
            <input class="s-int2" type="password" v-model="pass"/>
          </div>
          <button class="s-btn" @click="hLogin">登录</button>
        </div>
      </div>
      <div class="s-y"></div>
    </div>
  </div>

</template>

<style lang="less">
  #login{
    width: 100%;
    height: 950px;
    background-image: url("../assets/10.png");
    background-size: 100% 100%;
    position:absolute;
    top: 0;
    left: 0;
    .s-dl{
      width: 1200px;
      height: 850px;
      margin: 50px auto 50px ;
      /*background: green;*/
      border-radius: 20px;
      .s-z{
        width: 500px;
        height: 850px;
        background: white;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        .s-z1{
          text-align: center;
          width: 400px;
          height: 800px;
          position: absolute;
          margin-top: 20px;
          margin-left: 50px;
          .s-t2{
            display: block;
            width: 100px;
            height: 100px;
            margin:50px auto;
          }
          .s-y-1{
            position: relative;
            .s-sp1{
              color: #3695ff;
              font-size: 20px;
              display: block;
              position: absolute;
              top: 50px;
              left: 60px;
            }
            .s-int1{
              width: 280px;
              height: 30px;
              margin-top: 50px;
              text-indent: 2em;
              outline: none;
              border-top: none;
              border-left: none;
              border-right: none;
              border-bottom: 1px rgb(54,149,255) solid;
            }
          }
          .s-y-2{
            position: relative;
            .s-sp2{
              color: #3695ff;
              font-size: 20px;
              display: block;
              position: absolute;
              top: 50px;
              left: 60px;
            }
            .s-int2{
              width: 280px;
              height: 30px;
              margin-top: 50px;
              text-indent: 2em;
              outline: none;
              border-top: none;
              border-left: none;
              border-right: none;
              border-bottom: 1px rgb(54,149,255) solid;
            }
          }
          h1{
            margin-top: 50px;
            margin-bottom: 100px;
          }

          .s-btn{
            width: 200px;
            height: 50px;
            background: rgb(54,149,255);
            border-radius: 50px;
            margin-top: 80px;
            color: white;
            border: none;
            box-shadow: 0 5px 5px rgb(189,219,255);
            cursor: pointer;
          }

        }
      }
      .s-y{
        width: 700px;
        height: 850px;
        background-image: url("../assets/4.png");
        background-repeat:no-repeat ;
        background-size:cover ;
        margin-top: -850px;
        margin-left: 500px;
        border-bottom-right-radius: 20px;
        border-top-right-radius: 20px;
      }
    }
  }
</style>

<script>
    export default {
        name: 'login',
        data:function () {
            return {
              user:'',
              pass:''
            }
        },
        methods:{
            hLogin() {
                this.$axios({
                    method:'post',
                    url:'/api/hlogin',
                    data:{
                        user:this.user,
                        pass:this.pass
                    },
                }).then((res)=>{
                    if(res.data.error==0){
                        this.$router.push({ path: '/index'})
                    }else {
                        alert(res.data.msg)
                    }

                })
            }
        }
    }
</script>